import React, {PropTypes} from 'react'

//Button 组件
function Button(props){
    return (
        <button style={{background:props.color}}>
            {props.children}
        </button>
    );
}

Button.propTypes = {
    color: PropTypes.string.isRequired,
    children: PropTypes.string.isRequired
};


//Message 组件
function Message(props){
    return (
        <li>
            {props.text}
            <Button color={props.color}>Delete</Button>
        </li>
    );
}

Message.propTypes={
    text: PropTypes.string.isRequired,
    color: PropTypes.string.isRequired
};



function MessageList(){
    const color='red';
    const messages=[
            {text:'Hello React'},
            {text:'Hello Redux'}
        ];
    //当你遍历生成一个组件列表时，仍然需要给列表中的每一项传递key。这是因为React的DIFF算法需要key来做重新排列
    const children = messages.map((message, key)=>
        <Message key={key} text={message.text} color={color}/>
    );
    return (
        <div>
            <p style={{color:'red'}}>MessageList1.js: 通过 props 将 color 逐层传递给里面的Button组件</p>
            <ul>
                {children}
            </ul>
        </div>);
}

export default MessageList;


